import {Button, Col, Form, Input, Row} from 'antd';
import React from 'react';
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import "./rightCol.css"
import {history} from '../../.umi/core/history';

class RightCol extends React.Component {
  // 组件构造函数
  constructor(props) {
    super(props);
  }

  // 处理表单提交成功的回调函数
  onFinish = (values) => {
    let url = "http://1.94.134.166:8805/login?username=admin&password=123456"
    fetch(url, {
      method: 'POST',
    })
      .then(response => response.json())
      .then(res => {
        if (res.code == 0) {
          localStorage.setItem('Authorization', 'Bearer ' + res.data.token);
          history.push('/Demo2')
        }
        console.log(res);
      });
  };

  // 处理表单提交失败的回调函数
  onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  render() {
    return (
      <>
        {/* 登录表单 */}
        <div className="loginForm_title">用户登录</div>
        <div className="loginForm_inputarea">
          <Form
            name="basic"
            wrapperCol={{
              span: 24,
            }}
            initialValues={{
              username: "admin",
              password: "123456"
            }}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[{required: true, message: '请输入用户名!'}]}
            >
              <Input size="large" placeholder="请输入用户名" className="loginForm_username" prefix={<UserOutlined/>}/>
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{required: true, message: '请输入密码!'}]}
            >
              <Input.Password size="large" placeholder="请输入密码" className="loginForm_password" prefix={<LockOutlined/>}/>
            </Form.Item>

            {/* 验证码区域 */}
            <Row className="verify">
              <Col span={16}>
                <div className="verify_left">
                  <Form.Item>
                    <Input size="large" placeholder="请输入验证码" className="verify_code"/>
                  </Form.Item>
                </div>
              </Col>
              <Col span={8}>
                <div className="verify_right">
                  <Form.Item>
                    <Button type="primary" htmlType="button" className="verify_code_button">
                      获取验证码
                    </Button>
                  </Form.Item>
                </div>
              </Col>
            </Row>

            <Form.Item
              wrapperCol={{span: 24}}
            >
              <Button type="primary" htmlType="submit" className="loginForm_submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </>)
  }
}

export default RightCol;
